import 'package:flutter/material.dart';
import 'package:fantuike_app/constants.dart' show Constants, AppColors;
import 'package:dio/dio.dart';
import 'package:fantuike_app/api/Api.dart' show Api;
import 'child_page/artice_detail.dart';

class FindPage extends StatefulWidget {
  @override
  _FindPageState createState() => _FindPageState();
}

class _FindPageState extends State<FindPage>
    with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin {
  List<Tab> tabs = <Tab>[
    Tab(
      text: "前沿资讯", // 3
    ),
    Tab(
      text: "贷款资讯", // 4
    ),
    Tab(
      text: "申卡教程", // 5
    ),
    Tab(
      text: "用卡提额", // 6
    ),
    Tab(
      text: "金融技巧", // 7
    ),
    Tab(
      text: "网贷防骗", // 10
    )
  ];

  TabController _tabController;
  ScrollController _scrollController;

  int noticeCategoryId = 3;

  List aritles = [];

  @override
  void initState() {
    print(noticeCategoryId);

    super.initState();
    _scrollController = new ScrollController(initialScrollOffset: 0.0);
    _tabController = new TabController(vsync: this, length: 6, initialIndex: 0);
    getArticeList();
  }

  void getArticeList() {
    _getArticeList(noticeCategoryId).then((data) {
      setState(() {
        aritles = data['extend']['list']['list'];
      });
    });
  }

  Future _getArticeList(noticeCategoryId) async {
    String url = Api.getArticeListById +
        "?noticeCategoryId=" +
        noticeCategoryId.toString();
    try {
      Response response = await Dio().get(url);
      return response.data;
    } catch (e) {
      print(e);
    }
  }

  @override
  void dispose() {
    super.dispose();
    _scrollController.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBox) {
            return <Widget>[
              SliverAppBar(
                elevation: 0.0,
                leading: Text(""),
                pinned: true,
                floating: true,
                expandedHeight: 380,
                flexibleSpace: FlexibleSpaceBar(
                  collapseMode: CollapseMode.pin,
                  background: Container(
                    height: double.infinity,
                    child: Column(
                      children: <Widget>[
                        // 构造使用指南&推广技巧组件
                        BuildCommonWidget(),
                        Container(
                          height: 10.0,
                          color: Color(0xffF3F3F3),
                        ),
                        // 构建公告列表
                        BuildNoticeWidget(),
                        Container(
                          height: 10.0,
                          color: Color(0xffF3F3F3),
                        ),

                        Container(
                          margin: const EdgeInsets.only(left: 15.0, top: 10.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Container(
                                margin: const EdgeInsets.only(right: 10.0),
                                height: 18.0,
                                width: 3.0,
                                decoration:
                                    BoxDecoration(color: Color(0xfff26966)),
                              ),
                              Expanded(
                                flex: 3,
                                child: Container(
                                  child: Text(
                                    "头条",
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 17.0),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                bottom: TabBar(
                  isScrollable: true,
                  controller: _tabController,
                  indicatorSize: TabBarIndicatorSize.label,
                  labelColor: Color(0xfff26966),
                  indicatorColor: Color(0xfff26966),
                  unselectedLabelColor: Color(0xff000000),
                  tabs: tabs,
                ),
              )
            ];
          },
          body: TabBarView(
            controller: _tabController,
            children: <Widget>[
              _buildArticeList(3),
              _buildArticeList(4),
              _buildArticeList(5),
              _buildArticeList(6),
              _buildArticeList(7),
              _buildArticeList(10),
            ],
          )),
    ));
  }

  Widget _buildArticeList(noticeCategoryId) {
    List<Widget> tiles = [];

    for (var item in aritles) {
      tiles.add(GestureDetector(
        onTap: () {
          Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => ArticeDetail()));
        },
        child: Container(
          margin: const EdgeInsets.only(left: 10.0, right: 10.0),
          padding: const EdgeInsets.only(left: 5.0, right: 5.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                  child: Container(
                margin: const EdgeInsets.only(left: 5.0, top: 3.0, bottom: 5.0),
                alignment: Alignment.topLeft,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text(
                      item['title'],
                      overflow: TextOverflow.ellipsis,
                      maxLines: 3,
                    ),
                    Row(
                      children: <Widget>[
                        Icon(
                          IconData(0xe63a,
                              fontFamily: Constants.IconFontFamily),
                          color: Color(0xffBDBDBD),
                          size: 14.0,
                        ),
                        SizedBox(
                          width: 2.0,
                        ),
                        Text(
                          item['viewed'].toString(),
                          style: TextStyle(
                              color: Color(0xffbdbdbd), fontSize: 12.0),
                        )
                      ],
                    )
                  ],
                ),
              )),
              Container(
                alignment: Alignment.center,
                width: 120.0,
                height: 90.0,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage(item['avatar']), fit: BoxFit.fill),
                    borderRadius: BorderRadius.all(Radius.circular(8.0))),
              ),
            ],
          ),
          decoration: BoxDecoration(
              border: Border(
                  bottom: BorderSide(width: 1.0, color: Color(0xffE6E6E6)))),
        ),
      ));
    }
    return ListView(
      shrinkWrap: true,
      padding: const EdgeInsets.all(0.0),
      children: <Widget>[
        GridView.count(
          childAspectRatio: 7 / 2,
          mainAxisSpacing: 0.0,
          crossAxisSpacing: 0.0,
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          crossAxisCount: 1,
          children: tiles,
        )
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}

// 构建自定义AppBar
class MyAppBar extends StatefulWidget implements PreferredSizeWidget {
  final Widget child;

  MyAppBar({@required this.child}) : assert(child != null);

  @override
  _MyAppBarState createState() => _MyAppBarState();

  @override
  Size get preferredSize => new Size.fromHeight(45.0);
}

class _MyAppBarState extends State<MyAppBar> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: widget.child,
      top: true,
    );
  }
}

// 构造使用指南&推广技巧组件
class BuildCommonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin:
          const EdgeInsets.only(top: 20.0, left: 5.0, right: 5.0, bottom: 10.0),
      height: 75.0,
      child: Row(
        children: <Widget>[
          SizedBox(
            width: 10.0,
          ),
          Expanded(
              child: Container(
            alignment: Alignment.center,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  IconData(0xe60c, fontFamily: Constants.IconFontFamily),
                  size: 20.0,
                  color: Color(0xffffffff),
                ),
                SizedBox(width: 5.0),
                Text(
                  "使用指南",
                  style: TextStyle(color: Color(0xffFFFDFA), fontSize: 18.0),
                )
              ],
            ),
            decoration: BoxDecoration(
              color: Color(0xff69B7F9),
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              boxShadow: [
                BoxShadow(color: Color(0xffBCE0FE), blurRadius: 10.0)
              ],
            ),
          )),
          SizedBox(
            width: 15.0,
          ),
          Expanded(
              child: Container(
            alignment: Alignment.center,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  IconData(0xe668, fontFamily: Constants.IconFontFamily),
                  size: 25.0,
                  color: Color(0xffffffff),
                ),
                SizedBox(width: 4.0),
                Text("推广技巧",
                    style: TextStyle(color: Color(0xffFFFDFA), fontSize: 18.0))
              ],
            ),
            decoration: BoxDecoration(
                color: Color(0xffEA8058),
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                boxShadow: [
                  BoxShadow(color: Color(0xffFBC6B3), blurRadius: 10.0)
                ]),
          )),
          SizedBox(
            width: 10.0,
          ),
        ],
      ),
    );
  }
}

// 构建公告列表
class BuildNoticeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerLeft,
      margin:
          const EdgeInsets.only(top: 5.0, left: 15.0, right: 5.0, bottom: 10.0),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                margin: const EdgeInsets.only(right: 10.0),
                height: 18.0,
                width: 3.0,
                decoration: BoxDecoration(color: Color(0xfff26966)),
              ),
              Expanded(
                flex: 3,
                child: Container(
                  child: Text(
                    "公告",
                    style:
                        TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  alignment: Alignment.centerRight,
                  child: Row(
                    children: <Widget>[
                      Text(
                        "查看全部",
                        style:
                            TextStyle(color: Color(0xfff26966), fontSize: 13.0),
                      ),
                      SizedBox(
                        width: 3.0,
                      ),
                      Icon(
                        IconData(0xe61a, fontFamily: Constants.IconFontFamily),
                        size: 10.0,
                        color: Color(0xfff26966),
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
          Container(
            margin: const EdgeInsets.only(top: 8.0, right: 15.0, bottom: 5.0),
            height: 1.0,
            color: Color(0xffE6E6E6),
          ),
          Container(
            child: Column(
              children: <Widget>[
                Container(
                  margin: const EdgeInsets.only(top: 5.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        "涨工资50% : 大王贷款恢复放款 , 重新上架",
                        style: TextStyle(
                            color: Color(0xff262626),
                            fontSize: 15.0,
                            fontWeight: FontWeight.w500),
                      ),
                      Container(
                        child: Row(
                          children: <Widget>[
                            Text(
                              "#通知",
                              style: TextStyle(
                                  color: Color(0xffE34059), fontSize: 12.0),
                            ),
                            SizedBox(
                              width: 10.0,
                            ),
                            Text(
                              "19小时前",
                              style: TextStyle(
                                  color: Color(0xff9B9B9B), fontSize: 12.0),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 10.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        "关于最近下架多款产品的统一说明",
                        style: TextStyle(
                            color: Color(0xff262626),
                            fontSize: 15.0,
                            fontWeight: FontWeight.w500),
                      ),
                      Container(
                        child: Row(
                          children: <Widget>[
                            Text(
                              "#通知",
                              style: TextStyle(
                                  color: Color(0xffE34059), fontSize: 12.0),
                            ),
                            SizedBox(
                              width: 10.0,
                            ),
                            Text(
                              "23小时前",
                              style: TextStyle(
                                  color: Color(0xff9B9B9B), fontSize: 12.0),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 10.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        "最后10天 , 100万专项补贴所剩无几 , 速来 !",
                        style: TextStyle(
                            color: Color(0xff262626),
                            fontSize: 15.0,
                            fontWeight: FontWeight.w500),
                      ),
                      Container(
                        child: Row(
                          children: <Widget>[
                            Text(
                              "#通知",
                              style: TextStyle(
                                  color: Color(0xffE34059), fontSize: 12.0),
                            ),
                            SizedBox(
                              width: 10.0,
                            ),
                            Text(
                              "03-22",
                              style: TextStyle(
                                  color: Color(0xff9B9B9B), fontSize: 12.0),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
